<template>
	<view class="content" >
		   <form @submit="submit">
			<u-navbar :is-back="true" :border-bottom="false">
				<view style="height: 10px;"></view>
				<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
					<view class="slot-wrap-left"></view>
					<view class="slot-wrap-center mt10">群推荐</view>
					<view class="slot-wrap-right pr">
						<button form-type="submit" style="height: 70rpx;background: none;">
							<view style="position: relative;top:-20rpx;">
								<u-icon name="duihao" custom-prefix="qxl-icon" size="44"></u-icon>
							</view>
						</button>
					</view>
				</view>
			</u-navbar>

			<view v-if="show_main" class="main" >
				<view class="bgf disf p30">
					<view>
						<image :src="result.face_url" style="width: 100rpx;height: 100rpx;border-radius: 6px;"></image>
					</view>
					<view class="ml10">
						<view class="32 b">{{result.name}}</view>
						<view class="f30">
							<u-icon name="huo" custom-prefix="qxl-icon" color="red" size="44"></u-icon>
							<text>已推荐值:{{result.host_number}}</text>
						</view>
					</view>
				</view>
			    <view class="p30 f30 bgf disfr-lr">
					<view>今日推荐零点前有效</view>
					<view>我的{{result.virtual_coin_name}}:{{result.virtual_coin}}</view>
				</view>
				
				<view class="bgf p30 f32  bto">
					<view class="disfr-lr">
						<view class="pt10"><text>推荐值数</text></view>
						<view class="disf">
							<input type="number" name="virtual_coin" class="pr" style="text-align: right;top:5rpx"
							placeholder-style="color:#999999;font-size:32rpx;" placeholder="*输入推荐值"/>
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						 </view>
					 </view>
					 <view class="disfr-lr">
						 <view class="col999 f26">最低推荐值为{{result.rec_group_lower ? result.rec_group_lower:1}}</view>
						 <view></view>
					</view>
				</view>
				
				<view class="p30 f32">为该群推荐过的用户</view>
				<view v-if="result.list.length > 0" class="bgf p30">
					<view v-for="(item,index) in result.list" :key="index">
						<view  :class="'disfr-lr f28 mb20 '+(index < result.list.length-1 ? 'pb20 bbo' : '')">
							<view class="disf">
								<view>
									 <image :src="item.head_pic" 
									 style="width: 75rpx;height: 75rpx;border-radius: 6rpx;"></image>
								</view>
								<view class="ml10">
									<view class="f32">{{item.nickname}}</view>
									<view class="col999">为本群增加了{{item.coin_num}}推荐值</view>
								</view>
							</view>
							<view class="f26 col999">{{item.add_time_str}}</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view v-if="result.list.length <= 0 && not_load" style="text-align: center;margin-top: 10%;">
						<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
						<view class="f32 col999 mt20">暂无为本群推荐的用户</view>
					</view>
				</view>
				
				<view style="height:30rpx;"></view>
			</view>
			
		</form>
		<loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const result=ref({});
const group_id=ref(0); //推荐群ID

//表单提交
const submit=async(e)=>{
	if(!not_load.value) return;
	let form=e.detail.value;
	if(!form.virtual_coin){
		uni.$utils.showToast('推荐值必填');
		return;
	}
	let num=result.value.rec_group_lower;
	if(isNaN(num)) num=1;
	num=num < 1 ? 1 : num;
	if(form.virtual_coin < num){
		uni.$utils.showToast('推荐值最低'+num+'个'+result.value.virtual_coin_name);
		return;
	}
	form.group_id = group_id.value;
	not_load.value=false;
	let ret=await uni.$get('/appapi-group-topupsend',form);
	not_load.value=true;
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	uni.$utils.showToast(ret.info,0,()=>{
		uni.navigateBack({data:1});
	});
};
//页面加载时
onLoad(async (options)=>{
	group_id.value=options.id;
    loadPage(options,false);
});
//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-group-topup',{group_id:group_id.value});
	if(ret.error_code != 0){
		show_main.value=true;
		not_load.value=true;
		uni.$utils.showToast(ret.info,0,()=>{
			uni.navigateBack({data:1});
		});
		return;
	}
	
	show_main.value=true;
	not_load.value=true;
	result.value=ret.data;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	topDropDownShow.value=false;
	uni.$utils.dataSetPage(event);
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.my_button{
	color:#fff;
	font-weight: normal;
	font-size: 32rpx;
	border:none;
	background: blue;
	background: #2979ff;
}
</style>
